<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="../cssClass/titleBarCss.css">
    <link rel="stylesheet" href="../cssClass/about.css">
    <style>
        .main_div {
            width: 80%;
            margin: auto;
            height: 20rem;
            position: relative;
            /* background-image: url(../image/public/壁纸\ \(1\).jpg); */
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: 0px -0.6675rem;
        }

        .main_title {
            background-image: url(../image/public/title.jpg);
            background-size: 100%;
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            top: 50%;
            /* 将元素顶部移动到父元素高度的中点 */
            left: 50%;
            /* 可选：如果你也想水平居中 */
            transform: translate(-50%, -50%);
            /* 将元素移动到其中心点与父元素的中点对齐 */
        }

        .main_title_span {
            width: 100%;
            display: inline-block;
            position: absolute;
            bottom: -.89rem;
            text-align: center;
            font-size: .9rem;
            color: rgb(68, 123, 103);
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <!-- 头部背景+头像+登录+注册 -->
    <div class="main_div">
        <div class="backClass"><a href="./index.html">返回</a></div>
        <div class="main_title">
            <span class="main_title_span">王大头</span>
        </div>

    </div>
    <div style="width: 80%;margin: 0px  auto 20px auto;">
        <div class="title-bar">
            <div class="title-bar-container">
                <h1 class="title-bar-title">My Website</h1>
                <nav class="title-bar-nav">
                    <ul class="titlebar">
                        <li><a href="./index.html#content11" class="nav-link">Home</a></li>
                        <li><a href="./index.html#content22" class="nav-link">article</a></li>
                        <li class="active" onclick="jumpToFn('about')"> 关于我们
                        </li>
                        <li onclick="jumpToFn('novel')">最新文章</li>
                        <li onclick="jumpToFn('message')">给我留言</li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <header>
        <nav>
            <ul style="padding: 30px;">
                <li><a href="#about">关于我</a></li>
                <li><a href="#portfolio">作品集</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>关于我</h2>
            <p style=" font-family: 楷体;text-align: start;text-indent: 2em;">
                您好，我是文案领域的深耕者，擅长以笔墨描绘万千风格。</p>
            <p style=" font-family: 楷体;text-align: start;text-indent: 2em;">
                在文案的世界里，我既是探索者，也是创造者，每一字一句都力求精准而富有感染力。我的性格中蕴含着对细节的执着与对完美的追求，这使我能够精准捕捉需求，打造出既符合品牌调性又触动人心的作品。</p>
            <p style=" font-family: 楷体;text-align: start;text-indent: 2em;">
                我热衷于挑战不同的文案风格，从庄重典雅到轻松幽默，从深情款款到理性分析，我都能够游刃有余地驾驭。而今天，站在这里，我希望能够以我的专业与热情，为您的每一次发声增添光彩，共同书写属于我们的精彩篇章。</p>
            <p style="text-align: end;">
                感谢您的关注，期待与您携手共创辉煌。
            </p>

        </section>
        <section id="portfolio">
            <h2>作品集</h2>
            <div class="portfolio-item">
                <div class="content1_div">
                    <h3 style="margin-bottom: 20px;">摄影作品</h3>
                    <ul id="content_image">
                    </ul>
                    <div style="width: 100%;">
                        <span style="
                        text-align: center;
                        margin: auto;
                        display: block;
                        font-size: 1rem;
                        "><a href="./works.html">查看更多></a></span>
                    </div>
                    </p>
                </div>
            </div>
            <!-- 更多作品展示 -->
        </section>
        <section id="contact">
            <h2>联系我</h2>
            <p>邮箱: example@example.com</p>
            <p>电话: 123-456-7890</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 王大头. 保留所有权利.</p>
    </footer>
</body>

</html>
<script>
    function jumpToFn(item) {
        let isUrl;
        if (item == "login") {
            isUrl = "./login.html";
        } else if (item == "about") {
            isUrl = "./about.html";
        } else if (item == "register") {
            isUrl = "./register.html";
        } else if (item == "novel") {
            isUrl = "../electronicBook/index.html";
        } else if (item == "message") {
            isUrl = "./message.html";
        }
        window.location.href = isUrl;
    }
    let Content_image = document.getElementById("content_image");

    for (var i = 1; i < 9; i++) {
        var lis = document.createElement("li");
        var img = document.createElement("img");
        img.src = `../image/img/1 (${i}).jpg`;
        lis.appendChild(img);
        Content_image.appendChild(lis);
    }
</script>